<template>
  <Card title="今日收运统计" :loading="loading">
    <div style="height: 40px"> </div>
    <div ref="chartRef" :style="{ width, height }"></div>
  </Card>
</template>
<script lang="ts" setup>
  import { Ref, ref, watch } from 'vue';
  import { Card } from 'ant-design-vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  // import { preCollectionCensus } from '/@/api/sys/desktop';

  const props = defineProps({
    loading: Boolean,
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '350px',
    },
    res: {
      type: Object,
      default: {
        data: {},
      },
    },
  });

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  watch(
    () => [props.loading, props.res],
    () => {
      if (props.loading) {
        return;
      }
      handleData();
    },
    { immediate: true },
  );

  async function handleData() {
    // const res = await preCollectionCensus();
    setOptions({
      tooltip: {
        trigger: 'item',
      },
      legend: {
        data: ['已收运', '待收运', '已失败'],
      },

      series: [
        {
          name: '预约收运统计',
          type: 'pie',
          // radius: '80%',
          radius: ['40%', '70%'],
          center: ['50%', '50%'],
          color: ['#5ab1ef', '#b6a2de', '#ff9f7f'],
          data: [
            { value: props.res.data.shQty, name: '已收运' },
            { value: props.res.data.wshQty, name: '待收运' },
            { value: props.res.data.errQty, name: '已失败' },
          ],
          label: {
            formatter: '{name|{b}} ({time|{c}})',
            minMargin: 5,
            edgeDistance: 10,
            lineHeight: 15,
            rich: {
              time: {
                color: '#999',
              },
            },
          },
          // roseType: 'radius',
          // animationType: 'scale',
          // animationEasing: 'exponentialInOut',
          // animationDelay: function () {
          //   return Math.random() * 400;
          // },
          // label: {
          //   normal: {
          //     show: true,
          //     position: 'center',
          //     color: '#4c4a4a',
          //     formatter: '{total|' + res.data.totalQty + '}' + '\n\r' + '{active|总数}',
          //     rich: {
          //       total: {
          //         fontSize: 35,
          //         fontFamily: "微软雅黑",
          //         color: '#454c5c'
          //       },
          //       active: {
          //         fontFamily: "微软雅黑",
          //         fontSize: 16,
          //         color: '#6c7a89',
          //         lineHeight: 30,
          //       },
          //     }
          //   },
          //   emphasis: {//中间文字显示
          //     show: true,
          //   }
          // },
        },
      ],
      graphic: {
        type: 'text',
        left: 'center', // 水平居中
        top: 'center', // 垂直居中
        style: {
          text: props.res.data.totalQty + '\n\r' + '总数', // 显示的文字
          textAlign: 'center',
          fill: '#000', // 文字颜色
          fontSize: 26,
        },
      },
    });
  }
</script>
